<template>
   <div style="position: relative;">
      <div class="btn-manage">

         <el-button type="primary" size="mini" @click="handleClick({},'add')">添加用户</el-button>
      </div>

   
      <SearchBar @search="getSearchData" :searchList="searchList"></SearchBar>
      <el-table class="table-box"
      @selection-change="handleSelectionChange"
      :data="userList"
      style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        >
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        >
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别">
        <template slot-scope="scope">
         {{ scope.row.gender==0 ? '女' :'男' }}
         </template>

      </el-table-column>

      <el-table-column
         fixed="right"
         label="操作"
         width="200">
         <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,'detail')" type="text" size="small">详情</el-button>
            <el-button @click="handleClick(scope.row,'edit')" type="text" size="small">编辑</el-button>
            
            <el-button @click="handleClick(scope.row,'delete')" type="text" size="small">删除</el-button>
         </template>
      </el-table-column>

    </el-table>

    <el-dialog title="详情" :visible.sync="dialogVisible">

         <template v-if="category=='detail'">
            <Detail :currentData="currentData"  :detailList="detailList" title="用户详情"></Detail>
         </template>
         <template v-if="category=='edit'">
             <!-- 订阅sendOk事件类型 -->
            <UserUpdate :userId="currentData._id" @sendOk="getResult" :category="category"></UserUpdate>

         </template>

         <template v-if="category=='add'">
            <UserUpdate @sendOk="getResult" :category="category"></UserUpdate>
         </template>
       
     
    </el-dialog>

   
    <el-pagination class="pagination-col"
      background
      layout="prev, pager, next"
      @current-change="updateCurPage"
      :page-size="searchObj.pageSize"
      :current-page="searchObj.pageIndex"
      :hide-on-single-page="true"
      :total="totalCount">
      </el-pagination>

   </div>
</template>

  <script>
  import axiosEl from '@/utils/axios';
  import Detail from '@/components/Detail.vue';
  import UserUpdate from '@/components/UserUpdate.vue';
  import SearchBar from '@/components/SearchBar.vue';
  let detailList = [{
            label:'昵称',
            name:'nickname'
         },{
            label:'手机号',
            name:'phone'
         },{
            label:'图像',
            name:'icon',
            type:'image'
         },{
            label:'性别',
            name:'gender',
            type:'enum',
            options:[{
               label:'男',
               value:'1'
            },{
               label:'女',
               value:'0'
            }]
         },{
            label:'生日',
            name:'birthday'
         },{
            label:'从事行业',
            name:'industry'
         },{
            label:'生活状态',
            name:'status',
            type:'enum',
            options:[{
               label:'单身',
               value:'1'
            },{
               label:'热恋',
               value:'2'
            },{
               label:'已婚',
               value:'3'
            },{
               label:'为人父母',
               value:'4'
            }]
         },{
            label:'个性签名',
            name:'sign' 
     }];

   let searchList = [{
      label:'昵称',
      name:'nickname',
      type:'text'
   },
   {
      label:'性别',
      name:'gender',
      type:'select',
      options:[
         {
            label:'男',
            value:'1'
         },
         {
            label:'女',
            value:'0'
         }
      ]
   },
   {
      label:'手机号',
      name:'phone'
   }]
     
    export default {
      data() {
        return {
         category:'',   // 控制弹框的内容
         // 详情数据列表配置
         detailList:Object.freeze(detailList),
         searchList:searchList,
         currentData:{},  // 当前的数据
         dialogVisible:false,  // 是否弹框
         userList:[],
         searchObj:{
            pageSize:10,   // 每页显示的条数
            pageIndex:1   //页码
         },
         totalCount:0   // 数据总条数据

        }
      },
      components:{
         Detail,
         UserUpdate,
         SearchBar
      },
      methods:{
         handleSelectionChange(selection){
            console.log(selection);
            
         },
         // 监听子组件给的数据
         getSearchData(sdata){
            this.searchObj.pageIndex = 1;
            
            this.searchObj = {...this.searchObj, ...sdata}
            this.getUserList();
         },
         // 获取 UserUpdate子组件给的额数据
         getResult(data){
            console.log('=========',data);
            this.dialogVisible = false; // 关闭弹框
            this.getUserList();
         },
         // 监听页码的改变
         updateCurPage(page){
            console.log(page,'当前页码');
            this.searchObj.pageIndex = page;
            this.getUserList();// 重新获取数据
         },
         deleteFun(id) {

         this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(async ()=>{
         // 选项的形式
         let resData = await axiosEl({
               method:'delete',
               url:'/users/delete',
               params:{
                  id
               }
            })
            if(resData.code==1) {
               // 刷新数据
               this.getUserList();
               this.$message({
                  type: 'success',
                  message: '删除成功!'
               });
            }

          

         }).catch(()=>{
            this.$message({
               type: 'warning',
               message: '删除取消!'
            });
         })
        
         // 简写的形式 
         //  let resData = await  axiosEl.delete('/users/delete',{
         //       params:{
         //          id
         //       }
         //    })
     
            
         },

         handleClick(item,kind){
            this.currentData = item;
            this.category = kind;
            switch(kind){
               case 'delete':
                  this.deleteFun(item._id)
                  break;
               case 'detail':
                  this.dialogVisible = true;
                  break;
               case 'edit':
                  this.dialogVisible = true;
                  break;
               case 'add':
                  this.dialogVisible = true;
                  break;
            }
         },
       async  getUserList(){
          let resData = await axiosEl.get('/users/list',{
            params:this.searchObj
          });
          
          if(resData.data.length==0 && this.searchObj.pageIndex>1) {
            this.searchObj.pageIndex--;
            this.getUserList();
            return;
          }
          this.userList = resData.data;
          this.totalCount = resData.count;
         }
      },
      created(){
         this.getUserList();
      }
    }
  </script>

<style lang="scss">
     .pagination-col {
          height: 30px;
         margin-top: 30px;
      }
      .btn-manage {
         position: absolute;
         right:20px;
         top:-20px;
         z-index: 100;
      }
</style>